$numberOfRings: 6; // update together with HTML
$numberOfDots: 12; // update together with HTML
$radius: 100;
$dotsPerCircle: 12;
$angle: 360 / $dotsPerCircle;

@use 'sass:math';

.frame {
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
      overflow: hidden;
    background: #27ae60;
    color: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  .dot{
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    inset: 0;
    margin: auto;
    border-radius: 50%;
  }

  .ring{
    position: absolute;
    width: ($radius * 2) + px;
    height: ($radius * 2) + px;
    inset: 0;
    margin: auto;
  }


  @for $i from 1 through $numberOfRings{
    .ring-#{$i}{
        $nullBase: $i - 1;
        animation: inOut-#{$i} 6s ease-in-out alternate infinite;
        .dot{
            opacity: (1 - math.div($nullBase, 10));
        }
    }
  }


  @for $i from 1 through $numberOfDots{
    .dot-#{$i}{
        $nullBase: $i - 1;
        $deg: ($nullBase * $angle) + deg;
        transform: translate(0, ($radius * -1) + px) rotate($deg);
        transform-origin: 0 ($radius) + px;
    }
  }

  @for $i from 1 through $numberOfRings{
    @keyframes inOut-#{$i}{
        $nullBase: $i - 1;
        0%{
            transform: scale(1 - math.div($nullBase, 7)) rotate( ($nullBase * 5) + deg);
        }
        100%{
            transform: scale(1 - math.div($nullBase, 22)) rotate((($nullBase * 10) + 360) + deg);
            
        }
    }
  }